<script setup lang="ts">
import {useRouter} from "vue-router"
import {ResType} from "st-common-req"
import {useTipStore, TipNotificationTypeConst} from 'st-ui-vue3-navie'
import {useUserStore} from '@user'

/**
 * 组件参数
 */
const {
  title = '登录',
  labelWidth = 60,
  btnText = '登录',
  submitHandler = async () => {
  }
} = defineProps<{
  // 表单标题
  title?: string;
  // 表单标签宽度
  labelWidth?: string | number | 'auto';
  // 表单按钮文本
  btnText?: string;
  // 表单提交事件处理函数
  submitHandler?: () => Promise<ResType | undefined>;
}>()

/**
 * 登录表单提交处理函数
 */
const handleSubmit = async () => {
  // 触发登录表单提交事件
  const res = await submitHandler()
  // 登录请求发送失败
  if (!res) return
  // 登录失败
  if (!res.status) {
    useTipStore().notification({
      content: res.message,
      duration: 1500
    }, TipNotificationTypeConst.ERROR)
    return
  }
  // 登录成功
  useTipStore().notification({
    content: res.message,
    duration: 1500
  }, TipNotificationTypeConst.SUCCESS)
  // 保存登录用户信息
  useUserStore().saveUserInfo(res.data)
  // 跳转到首页
  await useRouter().replace({name: 'index'})
}
</script>

<template>
  <div class="login-form box-border w-full h-full p-4 grid grid-rows-1 grid-cols-1 justify-items-center items-center">
    <div
      class="login-form-content box-border w-full max-w-md p-8 px-10 pb-4 box-bg rounded-xl box-shadow overflow-hidden flex flex-col justify-center items-center">
      <h2
        class="login-form-content__title w-[fit-content] mb-6 bg-gradient-to-br from-[#92fe9d] to-[#18A058] bg-clip-text text-transparent text-8 font-bold">
        {{ title }}</h2>
      <div class="login-form-content__form w-full">
        <n-form
          label-placement="left"
          label-align="left"
          :label-width="labelWidth"
        >
          <slot></slot>
          <n-form-item>
            <n-button type="primary" block round attr-type="submit" @click="handleSubmit">{{ btnText }}</n-button>
          </n-form-item>
        </n-form>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
